/**
 * PictureDialog module
 */

 import eventHelper from "../../../util/EventHelper";

 var consts = require("../../../util/consts");
 var storage = require("../../../util/storage");
 var Upload = require("../../../util/upload/Upload");
 var dataProvider = require("../provider/dataProvider");
 var React = require("react");
 var PictureDialog = React.createClass({
    getInitialState: function (){
        return {
            fileUploaded: true
        }
    },
    getInitialProps: function (){
        return {
            root: {},
            data: {},
            isEdit: false,
            fromTemplate: false
        }
    },
    updateUploaded: function (uploaded){
        this.setState({ fileUploaded: uploaded });
    },
    componentDidMount: function (){
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    handleOnSubmit: function (){
        var root = this.props.root,
            isEdit = this.props.isEdit,
            extendImage = storage.data.is_edit_extend,
            fromTemplate = this.props.fromTemplate,
            widgets = this.refs.upload.getBuildWidgets();
        var id = storage.data.selectedWidgetId;
        var widget = dataProvider.getSpecifyWidgetById(id);

        root.closeDialog();
        // 模板AR
        if (fromTemplate){
            // 3d场景中更新图片
            if(extendImage) {//模板AR下编辑图文内容
                var widgetExtend = root.state.status.data;
                var imgSrc = [];
                widgets.forEach(function(widget){
                    imgSrc.push(widget.src);
                })
                var content = widget.action.content || "";

                imgSrc.forEach(function(src){
                    var img = '<img src="'+src+'" width="200" />';
                    content = content+img;
                })
                widget.action.content = content;

                root.updateLocaleWidget(widget);
                root.openDialog(consts.WIDGET_TYPE.EXTEND,true , widget ,true);
                return;
            }
            widget.custom = 1;
            widget.propertyChanged = true;
            widgets[0].type = widget.type;
            if (consts.WIDGET_EVENTS.indexOf(widget.action.type) == -1){
                widgets[0].action = widget.action;
                delete widgets[0].width;
                delete widgets[0].height;
            }
            widget = $.extend({}, widget, widgets[0]);
            root.updateSelectedWidget(widget);
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);
        } else if(isEdit) {
            root.updateSelectedWidget($.extend({}, widget, widgets[0]));

            widget.propertyChanged = true;
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);
        } else if(extendImage) {
            var widgetExtend = root.state.status.data;
            var imgSrc = [];
            widgets.forEach(function(widget){
                imgSrc.push(widget.src);
            })
            widgetExtend.rebuildContent(imgSrc);
        } else {
            widgets.forEach(function (widget){
                root.addWidgetToPage(widget);
            });
        }
    },
    render: function (){
        var self = this;
        var root = this.props.root;
        var fromTemplate = this.props.fromTemplate;
        var rStyle = {
            top: "50%",
            left: "50%",
            width: "670px",
            height: "auto",
            display: "block",
            borderRadius:'5px',
            overflow:'hidden'
        };

        var uploadOpts = {
            maxFiles: fromTemplate ? 1 : 99,
            size: 10 * 1024 * 1024,
            acceptedFiles: "image/jpg,image/jpeg,image/gif,image/png"
        };

        return (
            <dialog id="pictureDialog" ref="dialog" style={rStyle} className="btg-modal widget-form" onselectstart="return false">
                <div className="btg-modal-content">
                    <form noValidate name="form.name" className="form-horizontal">
                        <div className="widget-form-title">
                            <label>{$._("Upload image")}</label>
                        </div>
                        <Upload ref="upload" prefix="pictureDialog" options={uploadOpts} type={consts.WIDGET_TYPE.PICTURE} root={root} dialog={this} />
                        <div className="form-group buttons">
                            <button disabled={this.state.fileUploaded} type="button" onClick={this.handleOnSubmit}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </form>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = PictureDialog;
